import {Layout} from '../../src/Layout';
export default Layout;

import docs from 'docs:react-aria-components';
import vanillaDocs from 'docs:vanilla-starter/TextField';
import {TextField as VanillaTextField} from 'vanilla-starter/TextField';
import {TextField as TailwindTextField} from 'tailwind-starter/TextField';
import '../../tailwind/tailwind.css';
import Anatomy from '@react-aria/textfield/docs/anatomy.svg';

export const tags = ['input'];
export const relatedPages = [{'title': 'useTextField', 'url': 'TextField/useTextField.html'}];
export const description = 'Allows a user to enter a plain text value with a keyboard.';

# TextField

<PageDescription>{docs.exports.TextField.description}</PageDescription>

<ExampleSwitcher>
  <VisualExample
    component={VanillaTextField}
    docs={vanillaDocs.exports.TextField}
    links={vanillaDocs.links}
    props={['label', 'description', 'isReadOnly', 'isDisabled']}
    initialProps={{label: 'Name', placeholder: 'Enter your full name'}}
    type="vanilla"
    files={["starters/docs/src/TextField.tsx", "starters/docs/src/TextField.css"]} />
  <VisualExample
    component={TailwindTextField}
    docs={vanillaDocs.exports.TextField}
    links={vanillaDocs.links}
    props={['label', 'description', 'isReadOnly', 'isDisabled']}
    initialProps={{label: 'Name', placeholder: 'Enter your full name'}}
    type="tailwind"
    files={["starters/tailwind/src/TextField.tsx"]} />
</ExampleSwitcher>

## Value

Use the `value` or `defaultValue` prop to set the text value, and `onChange` to handle user input.

```tsx render
"use client";
import {TextField} from 'vanilla-starter/TextField';
import {useState} from 'react';

function Example() {
  let [name, setName] = useState('');

  return (
    <>
      <TextField
        label="Name"
        placeholder="Enter your full name"
        ///- begin highlight -///
        value={name}
        onChange={setName} />
      {/*- end highlight -*/}
      <p>Your name: {name}</p>
    </>
  );
}
```

## Forms

Use the `name` prop to submit the text value to the server. Set the `isRequired`, `minLength`, `maxLength`, `pattern`, or `type` props to validate the value, or implement custom client or server-side validation. See the [Forms](forms) guide to learn more.

```tsx render docs={docs.exports.TextField} links={docs.links} props={['isRequired', 'type', 'pattern', 'minLength', 'maxLength']} initialProps={{isRequired: true, type: 'email'}}
"use client";
import {TextField} from 'vanilla-starter/TextField';
import {Button} from 'vanilla-starter/Button';
import {Form} from 'vanilla-starter/Form';;

function Example(props) {
  return (
    <Form>
      <TextField
        {...props}
        label="Email"
        placeholder="Enter your email"
        ///- begin highlight -///
        name="email"
        /* PROPS */
        ///- end highlight -///
      />
      <Button type="submit">Submit</Button>
    </Form>
  );
}
```

## TextArea

Use `<TextArea>` instead of `<Input>` to enable multi-line input.

```tsx render
"use client";
import {TextField, Label, TextArea} from 'react-aria-components';

<TextField>
  <Label>Comment</Label>
  <TextArea
    className="react-aria-TextArea inset"
    placeholder="Enter a comment" />
</TextField>
```

## API

<Anatomy />

```tsx links={{TextField: '#textfield'}}
<TextField>
  <Label />
  <Input /> or <TextArea />
  <Text slot="description" />
  <FieldError />
</TextField>
```

### TextField

<PropTable component={docs.exports.TextField} links={docs.links} />
